<template>
<!-- better-scroll外层盒子 -->
    <div class="list" ref="wrapper">
        <!-- better-scroll内层盒子 -->
        <div>
            <div class="area">
                <div class="title">当前城市</div>
                <div class="button_list">
                    <div class="button_wrapper">
                        <div class="button">{{this.city}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title">热门城市</div>
                    <div class="button_list">
                        <div class="button_wrapper"
                        v-for="item of hot"
                        :key="item.id"
                        @click="handleCityClick(item.name)"
                        >
                        <div class="button">{{item.name}}</div>
                        </div>
                    </div>
            </div>
        <!-- 对象循环要有key -->
            <div class="area"
             v-for="(outItem,key) of areaCity"
             :key="key"
             :ref="key"
             >
                <div class="title">{{key}}</div>
                <div class="list_item"
                v-for="innerItem of outItem"
                :key="innerItem.id"
                @click="handleCityClick(innerItem.name)"
                >
                    <div class="item">{{innerItem.name}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// better-scroll安装：npm install better-scroll --save
// 引入better-scroll
import { mapState, mapMutations } from 'vuex'
import BScroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hot: Array,
    areaCity: Object,
    letter: String
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    handleCityClick (city) {
    //   this.$store.dispatch('changeCity', city)
      this.changeCity(city)
      this.$router.push('/')
      console.log('city',city)
    },
    ...mapMutations(['changeCity'])
  },
  
  // created() {
  //     this.$nextTick(() => {
  //         // 执行滚动方法
  //         this.scroll = new BScroll(this.$refs.wrapper)
  //     })
  // },
  mounted () {
    // this.$nextTick(() => {
      const options = {
        click: true,
        taps: true
        }
        this.scroll = new BScroll(this.$refs.wrapper,options)
      //  this.scroll = new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })
      // this.scroll = new BScroll(this.$refs.wrapper)
    // })
  },
  watch: {
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]
        this.scroll.scrollToElement(element)
      }
    }
  }
}
</script>

<style scoped>
    .title{
        line-height: 1.5rem;
        background-color:#eee;
        color: #666;
        text-align: left;
        padding-left: .8rem;
        font-weight: 500;
        font-size: 1rem;
        border-bottom:1px solid #ccc;
    }
    .button_list{
        padding: .2rem 1.2rem .2rem .2rem;
        overflow: hidden;
    }
    .button_wrapper{
        width: 33.33%;
        float: left;
        box-sizing: border-box;
    }
    .button{
        text-align: center;
        margin: .4rem;
        padding: .2rem;
        border: 1px solid #ccc;
        border-radius: .2rem;
    }
    .list_item .item{
        width:100%;
        text-align: left;
        height: 2.3rem;
        line-height: 2.3rem;
        font-size: 1rem;
        padding-left: 10px;
        border-bottom: 1px solid #ccc;
    }
    .list{
        width: 100%;
        position: absolute;
        top: 5rem;
        left: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
</style>
